<template>
    <svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" />
</template>
<script>
import  Screenfull from 'screenfull'
export default {
     name: 'Screenfull',
    data(){
        return{
            isFullscreen:false
        }
    },
    methods:{
        click(){
            if (!Screenfull.isEnabled) {
                this.$message({
                message: '您的浏览器无法工作',
                type: 'warning'
                })
                return false
            }
           Screenfull.toggle()
            this.isFullscreen = !Screenfull.isFullscreen;

        }

    }
}
</script>
<style lang="scss" scoped>
    .svg-icon{
        display: inline-block;
        vertical-align: middle;
        font-size: 15px;
        color: #5a5e66;
    }
</style>